<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>获取结果</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" th:href="@{/css/manage.css}">
</head>
<body>
<div class="manage-img" style="background-image: url('/img/indexBackground.jpg');background-size: cover;background-attachment: fixed ;min-height: 100%">
    <div>
        <div th:include="common/header"></div>
        <div class="ui container " style="width: 65%;">
            <table class="ui selectable celled table" style="opacity: 1;width: 1000px;text-align: center" th:if="${action} eq 'signal'">
                <thead>
                <tr>
                    <th colspan="8" style="text-align: center">
                        <span><div class="ui label red huge ">你可以任意选择一个</div></span>
                    </th>
                </tr>
                <tr>
                    <th>id</th>
                    <th>微信号</th>
                    <th>性别</th>
                    <th>学校</th>
                    <th>年级</th>
                    <th style="width: 130px">个人签名</th>
                    <th style="width: 200px">兴趣爱好</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="wechat,iterStat:${wechats}">
                    <td>
                        <div class="ui yellow circular label" th:text="${iterStat.index+1}"></div>
                    </td>
                    <td>
                        <span>
                            <input type="hidden" id="wechatId" name="wechatId" th:value="${wechat.id}">
                            <input class="ui mini blue label wechat" readonly="readonly" style="letter-spacing: 0;
                            width: 120px;text-align: center" type="password" value="*********"/>
                        </span>
                    </td>
                    <td>
                        <div class="ui black mini label" th:text="男" th:if="${wechat.sex==1}" style="letter-spacing: 0"></div>
                        <div class="ui pink mini label" th:text="女" th:if="${wechat.sex==0}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui teal mini label" th:text="${wechat.school}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui olive mini label" th:text="${wechat.grade}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui orange mini label" th:text="${wechat.description}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui label mini color" style="letter-spacing: 0;margin-bottom: 2px" th:each="tagName,iterStat:${wechat.tagNames}" th:text="${tagName}"></div>
                    </td>
                    <td>
                        <label class="ui label red small confirmBtn" onclick="confirmBtn(this)">选这个</label>
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="ui selectable celled table" style="opacity: 1;width: 1000px;text-align: center" th:if="${action} eq 'random'">
                <thead>
                <tr>
                    <th colspan="8" style="text-align: center">
                        <span><div class="ui label red huge ">社交天花板之间的较量</div></span>
                    </th>
                </tr>
                <tr>
                    <th>id</th>
                    <th>微信号</th>
                    <th>性别</th>
                    <th>学校</th>
                    <th>年级</th>
                    <th style="width: 130px">个人签名</th>
                    <th style="width: 200px">兴趣爱好</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="wechat,iterStat:${wechats}">
                    <td>
                        <div class="ui yellow circular label" th:text="${iterStat.index+1}"></div>
                    </td>
                    <td>
                        <span>
                            <input class="ui mini blue label wechat" readonly="readonly" style="letter-spacing: 0;
                            width: 120px;text-align: center" th:value="${wechat.wechat}"/>
                        </span>
                    </td>
                    <td>
                        <div class="ui black mini label" th:text="男" th:if="${wechat.sex==1}" style="letter-spacing: 0"></div>
                        <div class="ui pink mini label" th:text="女" th:if="${wechat.sex==0}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui teal mini label" th:text="${wechat.school}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui olive mini label" th:text="${wechat.grade}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui orange mini label" th:text="${wechat.description}" style="letter-spacing: 0"></div>
                    </td>
                    <td>
                        <div class="ui label mini color" style="letter-spacing: 0;margin-bottom: 2px" th:each="tagName,iterStat:${wechat.tagNames}" th:text="${tagName}"></div>
                    </td>
                    <td>
                        <a class="ui label red small confirmBtn" th:href="@{/user/index}">返回首页</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <form th:action="@{/user/index}" id="toIndex"></form>
</div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script>
    function confirmBtn(that){
        let wechatId = $(that).parent().parent().find("#wechatId").val();
        $.ajax({
            url: "/wechat/saveTake",
            type: "POST",
            data: {"wechatId":wechatId},
            success :function (result) {
                confirm("获取成功，请到微信管理中查看");
                $("#toIndex").submit();
            }
        })
    }
</script>
</body>
<script>
    $(function () {
        let colors = ["red","orange ","yellow ","olive ","green ","teal ","blue","violet ","purple ","pink ","brown","grey","black"]
        $(".color").each(function (i, n) {
            let index = parseInt(Math.random()*1000%13);
            $(this).addClass(colors[index])
        })
    })
</script>
</html>